<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>排名</title>
    <style>
        th {
            border: 1px solid;
            width: 100px;
        }

        td {
            width: 100px;
            height: auto;
            text-align: center;
            vertical-align: middle;
            border: 1px solid;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            border: 1px solid;
            margin: auto;
        }

        .stateDiv {
            height: 20px;
        }

        h1{
            text-align: center;
        }
    </style>
    
</head>

<body>
    <h1>默认按总成绩降序</h1>
    排序方式：
</br>
    <input type="radio" name="basis" id="姓名">姓名
    <input type="radio" name="basis" id="平时成绩">平时成绩
    <input type="radio" name="basis" id="期中成绩">期中成绩
    <input type="radio" name="basis" id="期末成绩">期末成绩
    <input type="radio" name="basis" id="总成绩">总成绩
</br>
    <input type="radio" name='order' id='1'>升序
    <input type="radio" name="order" id='0'>降序
</br>
    <button id="btn1">确定</button>
</br>        

    <table>
        <tr>
            <th>姓名</th>
            <th>平时成绩</th>
            <th>期中成绩</th>
            <th>期末成绩</th>
            <th>总成绩</th>
            <th>可视</th>
        </tr>
        {{row|safe}}
    </table>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $("#btn1").click(function () {
            var basis = $("[name='basis']").filter(":checked").attr("id");
            var ascending = $("[name='order']").filter(":checked").attr("id");
            $.post("/sortby", {
                Basis: basis,
                Ascending: ascending
            },
                function (data) {
                    $("tr").remove("#rd");
                    $("table").append(data);
                    if (ascending == '1'){
                        $('title').text('按'+basis+'升序');
                        $('h1').text('按'+basis+'升序');}
                    else{
                        $('title').text('按'+basis+'降序');
                        $('h1').text('按'+basis+'降序');}
                }
            );
        });//绑定click事件到button元素,function()相当于Python的lambda函数
    </script>

</body>

</html>